<template>
	<view class="prescription-pay">
		<view class="prescription-pay-header bg-light text-fff flexR">
			<text class="iconfont icon-qian"></text>
			<text>总金额：{{params.zje||'0'}}元</text>
		</view>
		<view class="bg-light prescription-pay-sawtooth">
			<image src="../../static/images/imgs/sawtooth.png" mode="scaleToFill"></image>
		</view>
		<view class="prescription-pay-main">
			<view class="reminder">
				<view class="reminder-title">
					温馨提示
				</view>
				<view class="reminder-content">
					微信缴费暂仅支持纯自费结算。
				</view>
				<!-- <view class="reminder-content">
					2.微信端取消挂号后，退款金额会原路退回到账户。
				</view> -->
			</view>
			<view class="div-cut"></view>
			<view class="prescription-pay-main-content" v-if="!ghxh">
				<view class="card-row" v-for="(item, i) in cardMainZZ" :key='i'>
					<label>{{item.label}}</label><text
						:class="item.unit==='元'?'money':''">{{params[item.key]||''}}</text>{{item.unit||''}}
				</view>
			</view>
			<view class="prescription-pay-main-content" v-else>
				<view class="card-row" v-for="(item, i) in cardMain" :key='i'>
					<label>{{item.label}}</label><text
						:class="item.unit==='元'?'money':''">{{params[item.key]||''}}</text>{{item.unit||''}}
				</view>
			</view>
		</view>
		<view class="prescription-pay-main-btn">
			<view class="theme-light-btn" @click="onClickJS"> 结算 </view>
		</view>
		<Loading :load='load'></Loading>
		<PopCard :show='showConfirm' title='信息确认' @close='showConfirm = false'>
			<view slot='content' class="info">
				<template v-if="!ghxh">
					<view v-for="item in cardMainZZ" class="card-row" :key='item.fKey'>
						<label>{{item.label}}</label>
						<text :class="item.unit==='元'?'money':''">{{params[item.key]||''}}</text>
						{{item.unit||''}}
					</view>
					<view class="card-row">
						<label>患者姓名：</label>{{userInfo.name||''}}
					</view>
					<view class="card-row">
						<label>就诊卡号：</label>{{userInfo.cardNo||''}}
					</view>
				</template>
				<template v-else>
					<view v-for="item in cardMain" class="card-row" :key='item.fKey'>
						<label>{{item.label}}</label>
						<text :class="item.unit==='元'?'money':''">{{params[item.key]||''}}</text>
						{{item.unit||''}}
					</view>
					<view class="card-row">
						<label>患者姓名：</label>{{userInfo.name||''}}
					</view>
					<view class="card-row">
						<label>就诊卡号：</label>{{userInfo.cardNo||''}}
					</view>
				</template>
				<view class="btn-group flexR">
					<view class="btn" @click="showConfirm = false">
						取消
					</view>
					<view class="btn" @click="toCreatPay">
						确认
					</view>
				</view>
			</view>
		</PopCard>
	</view>
</template>

<script>
	import Loading from '@/components/Load/index.vue'
	import PopCard from '@/components/PopCard/index.vue'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		poBudget
	} from '@/api/otherService.js'
	import tradePay from '@/utils/pay.js'
	import {
		getPayStatusMY
	} from "@/api/system.js"
	import {
		prescriptionSelectNoPayDetail
	} from '../../api/prescription'
	export default {
		components: {
			Loading,
			PopCard
		},
		data() {
			return {
				totleMoney:'368.26',
				params:{},
				cardMain:[
					{
						label:'挂号科室：',
						key:'ksmc',
						fKey:'label1'
					},
					{
						label:'挂号医生：',
						key:'ysxm',
						fKey:'label2'
					},
					{
						label:'挂号序号：',
						key:'ghxh',
						fKey:'label3'
					},
					{
						label:'收据号：',
						key:'sjh',
						fKey:'label4'
					},
					{
						label:'总金额：',
						key:'zje',
						fKey:'label5',
						unit:'元'
					},
					{
						label:'应付金额：',
						key:'ysje',
						fKey:'label6',
						unit:'元'
					}
				],
				cardMainZZ:[
					{
						label:'收据号：',
						key:'sjh',
						fKey:'label4'
					},
					{
						label:'总金额：',
						key:'zje',
						fKey:'label5',
						unit:'元'
					},
					{
						label:'应付金额：',
						key:'ysje',
						fKey:'label6',
						unit:'元'
					}
				],
				load:false,
				showConfirm:false,
				cfxhhj:null,
				ghxh:null,
				timeNumber:10000,
				timer:null,
				prescriptionData: ''
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		async onLoad(e) {
			this.prescriptionData = JSON.parse(e.item)
			// if(op.cfxhhj){//自助缴费携带参数 体检缴费  处方缴费
			// 	this.cfxhhj = op.cfxhhj
			// }
			// if(op.params){ // 门诊缴费时需要展示的开方科室与开方医生挂号序号等内容
			// 	let res = JSON.parse(op.params)
			// 	this.cfxhhj = res.cfxhhj
			// 	this.ghxh = res.ghxh
			// 	this.params = {
			// 		...res
			// 	}
			// }
			// await this.$onLaunched
			this.initData()
		},
		methods: {
			...mapActions(['createPay']),
			initData() {
				prescriptionSelectNoPayDetail({
					prePriceId: this.prescriptionData.preId
				}).then(res => {
					console.log(res)
				})
				// this.load = true
				// if(!this.userInfo.patId){
				// 	uni.navigateTo({

				// 		// url:'/pages/Login/index'

				// 		url:'/pages/Login/addPatient'

				// 	})
				// 	return
				// }
				// let params = {
				// 	cfxhhj:this.cfxhhj||'',
				// 	patId:this.userInfo.patId,
				// 	ghxh:this.ghxh||''
				// }
				// poBudget(params).then(data => {
				// 	this.load = false
				// 	let res = data||{}
				// 	this.params = { ...this.params,...res }
				// }).catch(e => {
				// 	this.load = false
				// })
			},
			onClickJS() {
				if (this.params.sjh) {
					this.showConfirm = true
				}
			},
			toCreatPay() {
				let params = {
					money: this.params.ysje,
					patId: this.userInfo.patId,
					sjh: this.params.sjh,
					tradeType: 2,
				}
				this.load = true
				this.createPay(params).then(data => {
					let paymentData
					// #ifdef MP-ALIPAY
					paymentData = data.tradeNo
					// #endif
					// #ifndef MP-ALIPAY
					paymentData = {
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.weChatPackage,
						signType: data.signType,
						paysign: data.paySign
					}
					// #endif
					if (paymentData) {
						// #ifdef MP-ALIPAY
						tradePay(paymentData, status => {
							if (status) {
								let info = {
									outTradeNo: data.outTradeNo
								}
								this.getStatus(info, 1000)
							}
						})
						// #endif
						// #ifndef MP-ALIPAY
						tradePay(paymentData)
						// #endif
					} else {
						this.$u.toast('系统错误')
					}
				}).catch(e => {
					this.load = false
				})
			},
			// 轮询
			getStatus(info, refreshTime) {
				this.load = true
				this.timer = setInterval(() => {
					if (this.timeNumber < 0) {
						this.clearTimer()
						this.$u.toast('业务处理状态未知，请以具体消息通知为准')
					}
					this.timeNumber -= refreshTime
					getPayStatusMY(info).then(data => {
						if (data) {
							let msg = ''
							if (data.tradeStatus === 'WAIT_BUYER_PAY' || data.tradeStatus ===
								'TRADE_CLOSED') {
								this.$u.toast('用户未支付')
								this.clearTimer()
							} else {
								if (data.payStatus === 4) {
									this.clearTimer()
									this.$u.toast('支付成功')
									uni.reLaunch({
										url: '/pages/Index'
									})
								} else if (data.payStatus === 7) {
									this.clearTimer()
									this.$u.toast('业务处理失败，已退款')
								}
							}
						} else {
							this.clearTimer()
						}
					}).catch(e => {
						this.clearTimer()
					})
				}, refreshTime)
			},
			// 清除计时器
			clearTimer() {
				this.load = false
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.prescription-pay {
		height: calc(100vh);
		background-color: $uni-bg-color;

		.prescription-pay-header {
			height: 180rpx;
			font-size: 18px;
			justify-content: center;
			align-items: center;

			.iconfont {
				font-size: 60px;
				margin-right: 10rpx;
			}
		}

		.prescription-pay-sawtooth {
			height: 20rpx;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.prescription-pay-main {
			max-height: calc(100vh - 150rpx - 150rpx);
			overflow: scroll;
			background-color: $uni-bg-color;

			>.prescription-pay-main-content {
				padding: 40rpx 50rpx;
			}
		}

		.prescription-pay-main-btn {
			height: 90rpx;
			margin: 30rpx;
		}

		.info {
			padding: 30rpx;

			>.card-row>.a-label {
				width: 160rpx;
				margin-right: 10rpx;
			}
		}

		.btn-group {
			margin-top: 40rpx;

			>.btn {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border: 1px solid $text-color-card-title;
				color: $text-color-card-title;
				border-radius: 10rpx;
				font-size: 16px;
				box-shadow: 6px 6px 6px rgba($color: #545454, $alpha: 0.12);
			}

			>.btn:last-child {
				margin-left: 20rpx;
				color: #FFFFFF;
				background-color: $theme-color-light;
				border: none;
			}
		}
	}
</style>